<script setup lang="jsx">
import { defineProps, reactive, ref, watch } from 'vue';
import { ElTree } from 'element-plus';
import { getBugList, getRoyiAddList } from '@/service/api/modules/scrap-judgment';
import Table from '@/components/common/table.vue';
const props = defineProps({
  upDatasA: {
    type: Object,
    required: true
  }
});
const emit = defineEmits(['row-clicked']); // 通过 emit 将数据传递给父组件。
const deptName = ref(null);
const deptOptions = ref([]);
// 部门树形
const defaultProps = {
  children: 'children',
  label: 'deptCaption'
};
const treeRef = ref(null);
const params = reactive({
  deptId: null,
  techId: null,
  pageNum: 1,
  pageSize: 200
});

// 左边部门表格
function getTreeData() {
  getRoyiAddList().then(({ data, error }) => {
    if (!error) {
      deptOptions.value = data;
    }
  });
}
getTreeData();

const pagination = reactive({
  current: 1,
  pageSize: 20,
  showSizeChanger: true,
  pageSizeOptions: ['5', '10', '15', '20'],
  showQuickJumper: true,
  showTotal: total => {
    return `共${total}条`;
  },
  total: 0,
  onChange: async (current, size) => {
    pagination.current = current;
    pagination.pageSize = size;
    getData();
  }
});
const tableData = ref([]);
const loading = ref(false);
// 缺陷代码
// 缺陷代码
const columnChecks = ref([
  {
    key: 'index',
    dataIndex: 'index',
    title: '序号',
    width: 80,
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'ltBugNo',
    dataIndex: 'ltBugNo',
    title: '缺陷代码',
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'ltBugName',
    dataIndex: 'ltBugName',
    title: '缺陷名称',
    align: 'center',
    checked: true,
    ellipsis: true,
    width: 150
  },
  {
    key: 'instruction',
    dataIndex: 'instruction',
    title: '缺陷说明',
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'cause',
    dataIndex: 'cause',
    title: '缺陷原因',
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'action',
    dataIndex: 'action',
    title: '预防措施',
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'ipqc',
    dataIndex: 'ipqc',
    title: 'IPQC',
    align: 'center',
    checked: true,
    ellipsis: true,
    // 如果值为1转化为true，否则为false
    customRender: ({ record }) => {
      // 如果接受的值为1，则显示true，否则显示false
      if (record.ipqc === '1') {
        return <span>true</span>;
      }
      return <span>false</span>;
    }
  },
  {
    key: 'mrb',
    dataIndex: 'mrb',
    title: 'MRB',
    align: 'center',
    checked: true,
    ellipsis: true,
    customRender: ({ record }) => {
      // 如果接受的值为1，则显示true，否则显示false
      if (record.mrb === '1') {
        return <span>true</span>;
      }
      return <span>false</span>;
    }
  },
  {
    key: 'fqc',
    dataIndex: 'fqc',
    title: 'FQC',
    align: 'center',
    checked: true,
    ellipsis: true,
    customRender: ({ record }) => {
      // 如果接受的值为1，则显示true，否则显示false
      if (record.fqc === '1') {
        return <span>true</span>;
      }
      return <span>false</span>;
    }
  }
]);

const currentRowId = ref(null);
const customRow = record => {
  return {
    style: {
      background: record.bugId === currentRowId.value ? '#BAEAFA' : ''
    },
    class: record.bugId === currentRowId.value ? 'jl-table-row-selected' : '',
    onClick: () => {
      currentRowId.value = record.bugId;
      emit('row-clicked', record, { ...upDatasA }); // 将当前行的bugId传递给父组件
    }
  };
};

// 缺陷表格数据
function getData() {
  loading.value = true;
  getBugList(params)
    .then(({ data, error }) => {
      if (!error) {
        data.list.forEach((item, index) => {
          item.index = index + 1;
        });
        pagination.total = data?.total || 0;
        tableData.value = data.list;
      }
    })
    .finally(() => (loading.value = false));
}
// getData();

// 筛选节点
function filterNode(value, data) {
  if (!value) return true;
  return data.label.includes(value);
}

function handleNodeClick(node) {
  params.deptId = node.deptId;
  getData();
}

watch(
  () => deptName.value,
  val => {
    treeRef.value.filter(val);
  }
);
// 判定表单
const formListA = [
  {
    type: 'input',
    key: 'scrapPnlQty',
    label: '可判PNL数',
    span: 8,
    disabled: true
  },
  {
    type: 'input',
    key: 'scrapSetQty',
    label: '可判SET数',
    span: 8,
    disabled: true
  },
  {
    type: 'input',
    key: 'scrapPcsQty',
    label: '可判PSC数',
    span: 8,
    disabled: true
  },
  {
    type: 'inputNumber',
    key: 'pnlQty',
    label: '判定PNL数',
    span: 8,
    rule: [
      // 如果值value的值只能大于0并且小于等于upDatasA.scrapPnlQty，否则不能操作inputNumber
      {
        validator: (rule, value) => {
          if (value > upDatasA.scrapPnlQty) {
            return Promise.reject('判定PNL数不能超过可判PNL数');
          } else if (value < 0) {
            return Promise.reject('判定PNL数不能为负');
          }
          return Promise.resolve();
        },
        trigger: 'change'
      }
    ]
  },
  {
    type: 'inputNumber',
    key: 'setQty',
    label: '判定SET数',
    span: 8,
    rule: [
      {
        validator: (rule, value) => {
          if (value > upDatasA.scrapSetQty) {
            return Promise.reject('判定SET数不能超过可判SET数');
          } else if (value < 0) {
            return Promise.reject('判定PNL数不能为负');
          }
          return Promise.resolve();
        },
        trigger: 'change'
      }
    ]
  },
  {
    type: 'inputNumber',
    key: 'pcsQty',
    label: '判定PSC数',
    span: 8,
    rule: [
      {
        validator: (rule, value) => {
          if (value > upDatasA.scrapPcsQty) {
            return Promise.reject('判定PSC数不能超过可判PSC数');
          } else if (value < 0) {
            return Promise.reject('判定PNL数不能为负');
          }
          return Promise.resolve();
        },
        trigger: 'change'
      }
    ]
  },
  {
    type: 'input',
    key: 'remark',
    label: '备注',
    span: 24
  }
];

function printFormValues() {
  console.log('判定表格的当前值：', props.upDatasA);
}
// 点击行
function tableRowClickAdd(record) {
  emit('row-clicked', record); // 传递 record.bugId 批卡号给父组件
  console.log(111, record.bugId);
  printFormValues();
}

const upDatasA = reactive({
  scrapPnlQty: props.upDatasA.scrapPnlQty,
  scrapSetQty: props.upDatasA.scrapSetQty,
  scrapPcsQty: props.upDatasA.scrapPcsQty,
  pnlQty: 0,
  setQty: 0,
  pcsQty: 0,
  remark: null
});

// 使用 watch 监听 props 的变化，并更新 formData
watch(
  () => props.upDatasA,
  newVal => {
    upDatasA.scrapPnlQty = newVal.scrapPnlQty;
    upDatasA.scrapSetQty = newVal.scrapSetQty;
    upDatasA.scrapPcsQty = newVal.scrapPcsQty;
  },
  { immediate: true, deep: true }
);

defineExpose({
  upDatasA
});
</script>

<template>
  <div class="min-h-500px flex-col-stretch gap-16px overflow-hidden lt-sm:overflow-auto">
    <ARow :gutter="10" class="h-full" style="height: 800px">
      <ACol :span="5" class="dept h-full">
        <div class="title">
          <span>责任部门</span>
        </div>
        <div class="head-container">
          <AInput v-model:value="deptName" placeholder="请输入部门名称" />
        </div>
        <div class="head-tree">
          <ElTree
            ref="treeRef"
            :data="deptOptions"
            :props="defaultProps"
            :expand-on-click-node="false"
            :filter-node-method="filterNode"
            node-key="deptId"
            default-expand-all
            highlight-current
            empty-text="暂无部门数据"
            @node-click="handleNodeClick"
          />
        </div>
      </ACol>
      <ACol :span="19" class="h-full flex-col-stretch gap-16px overflow-hidden">
        <ACard :bordered="false" class="table-card h-full flex-col-stretch sm:flex-1-hidden card-wrapper">
          <div style="height: 600px">
            <Table
              :column="columnChecks"
              :data-source="tableData"
              :show-row-selection="false"
              bordered
              size="small"
              :loading="loading"
              row-key="bugId"
              :pagination="pagination"
              :custom-row="customRow"
              :scroll="{ x: 'auto', y: '2000' }"
              class="h-full"
              :row-height="24"
              @table-row-click="tableRowClickAdd"
            />
          </div>
        </ACard>
        <!-- </div> -->
        <!-- <ACard :bordered="false"> -->
        <div>
          <ATabs>
            <ATabPane key="1" tab="判定"></ATabPane>
          </ATabs>
        </div>
        <div class="event-form">
          <Form v-model:model="upDatasA" :form-list="formListA"></Form>
        </div>
        <!-- </ACard> -->
      </ACol>
    </ARow>
  </div>
</template>

<style lang="scss" scoped>
.dept {
  padding: 8px;
  background: #fff;
  box-shadow: 2px 5px 8px 0 #eee;
  .title {
    text-align: center;
    color: #646cff;
    font-size: 18px;
    font-weight: bold;
    padding: 5px;
    .text {
      border-bottom: 2px solid #646cff;
      padding: 0 8px;
    }
  }
  .head-tree {
    height: calc(100% - 75px);
    overflow: auto;
  }
}
</style>
